<template>
    <div class="login_in">
        <div class="login_box">
            <div class="login_img">
                <img src="@/assets/logo1.png">
            </div>
            <el-form ref="loginForm" label-width="80px" class="login_form">
                <el-form-item label="用户名：" prop="username">
                    <el-input type="text" v-model="username" @change="checkname()"></el-input>
                    <span class="error-msg">{{ usermag }}</span>
                </el-form-item>
                <el-form-item label="密码：" prop="password">
                    <el-input type="password" v-model="password" @change="checkpassword()"></el-input>
                    <span class="error-msg">{{ passmag }}</span>
                    <span class="error-msg">{{ loginmsg }}</span>
                </el-form-item>
                <el-form-item class="btns">
                    <el-button type="primary" @click="login()">登录</el-button>
                    <el-button type="info" @click="resetForm()">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            username: "",
            password: "",
            usermag: "",
            passmag: "",
            loginmsg: ""
        }
    },
    methods: {
        async login() {
            if (this.checkname() && this.checkpassword()) {
                this.loginmsg = ""
                let data = await this.$axios.post("/login", {
                    username: this.username,    //认证数据库里账号一致
                    password: this.password
                })
                if (data.data.meta.msg == "登录成功" && data.data.meta.status == 200) {
                    window.sessionStorage.setItem("token", data.data.data.token)    //保存登录数据在sessionStorage
                    this.$router.push({ path: "/index" })    //登录成功跳转首页
                }
                else {
                    this.loginmsg = data.data.meta.msg   //获取登录状态
                }
            } else {
                alert("请输入正确的账号或密码")
            }
        },
        checkname() {    //用户名校验
            let username = this.username;
            let reg = /^\w{2,10}$/
            if (reg.test(username)) {
                this.usermag = ""
                return true
            }
            this.usermag = "请输入正确的用户名"
            return false
        },
        checkpassword() {    //密码校验
            let password = this.password;
            let reg = /^\w{2,10}$/
            if (reg.test(password)) {
                this.passmag = ""
                return true
            }
            this.passmag = "请输入正确的密码"
            return false
        },
        //重置
        resetForm() {
            this.$refs.loginForm.resetFields();
        }
    },
}
</script>
<style scoped>
.login_in {
    background-color: skyblue;
    height: 100%;
}

.login_box {
    width: 500px;
    height: 300px;
    text-align: center;
    line-height: 50px;
    border-radius: 10px;
    background-color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    .login_img {
        width: 100px;
        height: 100px;
        border: 1px solid #eee;
        border-radius: 50%;
        padding: 10px;
        box-shadow: 0 0 10px #ddd;
        background-color: #fff;
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: #eee;
    }
}

.login_form {
    position: absolute;
    top: 85px;
    bottom: 0;
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
}

.login_form .btns {
    display: flex;
    justify-content: flex-end;
}
</style>